<script setup lang="js">

// 引入naive-ui
import {NButton} from "naive-ui";

// 引用类型
const props = defineProps({
  // 数据
  item: {
    type: Object,
    required: true
  }
});

// 跳转
const open = () => {
  navigateTo(`/detail/book/${props.item.id}`)
}

</script>

<template>
  <section class="bg-white shadow rounded p-5 flex items-stretch mb-5">
    <UiImage :src="item.cover  " class="w-[108px] h-[138px] rounded flex-shrink-0 bg-gray-50"/>
    <div class="flex flex-col pl-5 flex-1">
      <h4>{{ item.title }}</h4>
      <div class="mt-auto flex items-center">
        <div class="flex items-end">
          <Price :value="item.price"/>
          <Price :value="item.t_price" through class="ml-2"/>
        </div>

        <n-button strong secondary round type="primary" class="ml-auto" @click="open">
          {{ Number(item.sub_count) === 0 ? `立即订阅` : `${item.sub_count}人订阅` }}
        </n-button>
      </div>
    </div>
  </section>
</template>

<style scoped>

</style>